<template>
  <div class="container" :style="scaleStyle">
    <div class="container_top">
      <div class="topleft">
        <p @click="$router.push('/xuequfenxi')">学区分析</p>
        <p @click="$router.push('/yubaom')">预报名分析</p>
        <p class="active">实时报名</p>
        <p @click="$router.push('/xueweitiaoji')">学位调剂</p>
      </div>
      <p>{{ cityname }}.实时报名检测</p>
      <div class="topright">
        <div>
          统计时间：
          <el-select style="width: 132px; z-index: 9; position: relative" v-model="localYear"
                     :popper-append-to-body="false">
            <el-option
              v-for="item in yearList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
              class="selectbox"
            >
            </el-option>
          </el-select>
        </div>
      </div>
    </div>
    <div class="container_body">
      <div class="bmap" id="bmap" ref="bmap"></div>
      <div class="sidebox">
        <div class="maintitle"><p>学生占比</p></div>
        <div class="mainbox" style="height:255px;">
          <div class="mainbox_content">
            <div class="flexbetween">
              <div class="yzjzbox" style="width:50%;position: relative; ">
                <v-chart :option="chartpie1" style="width:100%; height:175px"></v-chart>
                <div class="yzjzcircle"></div>
                <div class="flexbetween" style="width:90%;margin:0 auto;">
                  <div :class="'pielegend pielegend1'+index" v-for="(item,index) in pie1data" :key="index">
                    <p>{{ item.name }}:人</p>
                    <p class="normaltxt"><span class="keyblue">{{ item.value }}</span></p>
                    <p class="normaltxt"><span>{{ item.percent }}%</span></p>
                  </div>
                </div>
              </div>

              <div style="flex:1;border-left:1px solid rgba(255,255,255,0.24)">
                <v-chart :option="chartpie2" style="width:100%; height:175px"></v-chart>
                <div class="flexbetween" style="width:90%;margin:0 auto;">
                  <div :class="'pielegend pielegend2'+index" v-for="(item,index) in pie2data" :key="index">
                    <p>{{ item.name }}:人</p>
                    <p class="normaltxt"><span class="keyblue">{{ item.value }}</span></p>
                    <p class="normaltxt"><span>{{ item.percent }}%</span></p>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="maintitle"><p>报名人数</p></div>
        <div class="mainbox" style="height:255px">
          <div class="mainbox_content">
            <div class="flexbox" style="justify-content: space-around">
              <p class="normaltxt">线上报名:<span class="keyblue">{{ baomingdata.online }}</span>人 </p>
              <p class="normaltxt">线下报名:<span class="keyblue">{{ baomingdata.offline }}</span>人 </p>
            </div>
            <div class="subtitle">
              <p>实时报名人数趋势</p>
            </div>
            <v-chart :option="chartLine" style="width:100%; height:175px"></v-chart>
          </div>
        </div>
        <div class="maintitle"><p>乡镇街道排名</p></div>
        <div class="mainbox" style="height:255px">
          <div class="mainbox_content">
            <div class="wrap-table head">
              <table style="border-spacing: 0">
                <colgroup>
                  <col style="width: 15%"/>
                  <col style="width: 30%"/>
                  <col style="width: 55%"/>
                </colgroup>
                <thead>
                <tr>
                  <th>排名</th>
                  <th>乡镇街道</th>
                  <th style="text-align: left">报名人数</th>
                </tr>
                </thead>
              </table>
            </div>
            <div class="wrap-table body">
              <table style="border-spacing: 0">
                <colgroup>
                  <col style="width: 15%"/>
                  <col style="width: 30%"/>
                  <col style="width: 55%"/>
                </colgroup>
                <tr v-for="(item,index) in top10data" :key="index">
                  <td><p :class="index<1?'sortN'+index : ''">{{ (index + 1) }}</p>
                  </td>
                  <td>
                    <div>{{ item.city }}</div>
                  </td>
                  <td>
                    <div style="display: flex">
                      <div class="progressbox1">
                        <div :class="index===0?'progresscurbox progress0':'progresscurbox'"
                             :style="{'width':item.percent+'%'}"></div>
                      </div>
                      <div style="color: #fff;margin-right:10px;">{{ item.value }}</div>
                    </div>
                  </td>
                </tr>
              </table>
            </div>
          </div>
        </div>
      </div>
      <div class="midbox">
        <div class="flexbetween midtopbox">
          <div class="midtjbox1  midtj0">
            <div class="flexbetween">
              <div class="midtopcontent">
                <p class="normaltxt"><span class="lightblue2" style="padding-left:0">{{ middata.yibaoming }}</span></p>
                <p class="normaltxt">当前已报名 (人)</p>
              </div>
              <div class="midtopcontent">
                <p class="normaltxt"><span class="keygreen" style="padding-left:0">{{ middata.yibaoming }}</span></p>
                <p class="normaltxt">当前录取 (人)</p>
              </div>
              <div class="midtopcontent" style="cursor: pointer" @click="shengyuview=!shengyuview">
                <p class="normaltxt"><span class="keyyellow2 keyarrow" style="padding-left:0">{{
                    middata.yibaoming
                  }}</span></p>
                <p class="normaltxt">剩余学位 (个)</p>
              </div>
            </div>
          </div>
          <div class="midtjbox1">
            <div class="flexbox progressbox1">
              <div v-for="(item,index) in middata.xiaoxuedata" :key="index"
                   :class="'progresscurbox progresscurbox'+index" :style="{'width':item.percent+'%'}"></div>
            </div>
            <div class="flexlist">
              <div :class="'tjlist tjlist'+index" v-for="(item,index) in middata.xiaoxuedata" :key="index">
                <p class="normaltxt">小学{{ item.name }}:<span
                  class="keyblue">{{ item.value }}</span><b>{{ item.unit }}</b></p>
              </div>
            </div>
          </div>
          <div class="midtjbox1" style="border-right:0">
            <div class="flexbox progressbox1">
              <div v-for="(item,index) in middata.zhongxuedata" :key="index"
                   :class="'progresscurbox progresscurbox'+index" :style="{'width':item.percent+'%'}"></div>
            </div>
            <div class="flexlist">
              <div :class="'tjlist tjlist'+index" v-for="(item,index) in middata.zhongxuedata" :key="index">
                <p class="normaltxt">中学{{ item.name }}:<span
                  class="keyblue">{{ item.value }}</span><b>{{ item.unit }}</b></p>
              </div>
            </div>
          </div>

        </div>
        <div class="flexbetween" style="margin-top:10px;">
          <div class="mapname"><p>{{ mapname }}</p></div>
          <div class="mapcontrolbox">
            <p :class="mapcontrol===1?'green active':'green'" @click="mapcontrol=1">小学</p>
            <p :class="mapcontrol===2?'yellow active':'yellow'" @click="mapcontrol=2">初中</p>
          </div>
          <div>
            <el-select style="width: 132px; z-index: 9; position: relative" v-model="localcity"
                       :popper-append-to-body="false">
              <el-option
                v-for="item in cityList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
                class="selectbox"
              >
              </el-option>
            </el-select>
            <el-input v-model="searchtxt" placeholder="请输入关键字 学区/学校" style="width:300px;"></el-input>
          </div>
        </div>
        <div v-if="shengyuview" class="shengyubox">
          <div class="shengyutop">
            <div class="maintitle"><p>剩余学位明细</p></div>
          </div>
          <div class="shengyucontent">
            <div class="shengyubody">
              <div class="flexbetween">
                <div :class="sorttype===0?'xuexiaolistbox active':'xuexiaolistbox'"
                     @click="sorttype=0">
                  <p> 正序 </p>
                </div>
                <div :class="sorttype===1?'xuexiaolistbox active':'xuexiaolistbox'"
                     @click="sorttype=1">
                  <p> 倒序 </p>
                </div>
              </div>
              <div class="wrap-table head" style="margin-top:20px;">
                <table style="border-spacing: 0">
                  <colgroup>
                    <col style="width: 15%"/>
                    <col style="width: 45%"/>
                    <col style="width: 40%"/>
                  </colgroup>
                  <thead>
                  <tr>
                    <th>序号</th>
                    <th>学校名称</th>
                    <th>剩余学位</th>
                  </tr>
                  </thead>
                </table>
              </div>
              <div class="wrap-table body" style="max-height: 470px; overflow: auto">
                <table style="border-spacing: 0">
                  <colgroup>
                    <col style="width: 15%"/>
                    <col style="width: 45%"/>
                    <col style="width: 40%"/>
                  </colgroup>
                  <tr v-for="(item,index) in shengyuinfodata" :key="index" style="cursor: pointer">
                    <td><p :class="index<1?'sortN'+index : ''">{{ (index + 1) }}</p>
                    <td><p>{{ item.name }}</p>
                    </td>
                    <td>
                      {{ item.value }}
                    </td>

                  </tr>
                </table>
              </div>
            </div>
          </div>
        </div>
        <div class="mapbigbox">
          <div><p>+</p>
            <p>-</p></div>
        </div>
        <div class="schoolcontrolbox school0" v-if="schoolcontrol===0">
          <p @click="schoolcontrol=1">只看小学</p>
          <p class="active">全部学校</p>
          <p @click="schoolcontrol=2">只看初中</p>
        </div>
        <div class="schoolcontrolbox school1" v-if="schoolcontrol===1">
          <p class="active">只看小学</p>
          <p @click="schoolcontrol=0">全部学校</p>
          <p @click="schoolcontrol=2">只看初中</p>
        </div>
        <div class="schoolcontrolbox school2" v-if="schoolcontrol===2">
          <p @click="schoolcontrol=1">只看小学</p>
          <p @click="schoolcontrol=1">全部学校</p>
          <p class="active">只看初中</p>
        </div>
      </div>
      <div class="sidebox">
        <div class="maintitle"><p>报名倒计时</p></div>
        <div class="mainbox" style="height: 55px;">
          <div class="mainbox_content">
            <div class="tmpbox"></div>
          </div>
        </div>
        <div class="rightbox">
          <div class="rightbox_content">
            <div class="poptitlebox">
              <div class="flexbox" style="padding-top:20px;">
                <p class="poptype">{{ schooldata.type }}</p>
                <p class="poptitle">{{ schooldata.name }}</p>
                <p class="topopinfo" style="cursor: pointer" @click="$router.push('/xuexiao')">详情</p>
              </div>
              <p>学校地址：{{ schooldata.address }}</p>
            </div>
            <div class="flexwrap">
              <div :class="'listbox listbox2'+index" v-for="(item,index) in schooldata.baomingdata" :key="index">
                <p class="listval">{{ item.value }}</p>
                <p class="listname">{{ item.name }}</p>
              </div>
            </div>
            <div class="wrap-table head" style="margin-top:20px;">
              <table style="border-spacing: 0">
                <colgroup>
                  <col style="width: 10%"/>
                  <col style="width: 10%"/>
                  <col style="width: 20%"/>
                  <col style="width: 10%"/>
                  <col style="width: 10%"/>
                  <col style="width: 40%"/>
                </colgroup>
                <thead>
                <tr>
                  <th>排名</th>
                  <th>类型</th>
                  <th>姓名</th>
                  <th>性别</th>
                  <th>年龄</th>
                  <th>地址</th>
                </tr>
                </thead>
              </table>
            </div>
            <div class="wrap-table body" style="height: 470px; overflow: auto">
              <table style="border-spacing: 0">
                <colgroup>
                  <col style="width: 10%"/>
                  <col style="width: 10%"/>
                  <col style="width: 20%"/>
                  <col style="width: 10%"/>
                  <col style="width: 10%"/>
                  <col style="width: 40%"/>
                </colgroup>
                <tr v-for="(item,index) in schooldata.xuexiaodata" :key="index" style="cursor: pointer"
                    @click="$router.push('/xuesheng')">
                  <td><p :class="index<1?'sortN'+index : ''">{{ (index + 1) }}</p>
                  <td><p>{{ item.type }}类</p>
                  </td>
                  <td>
                    <div>{{ item.name }}</div>
                  </td>
                  <td>
                    {{ item.sex }}
                  </td>
                  <td>{{ item.age }}</td>
                  <td><p>{{ item.address }}</p></td>
                </tr>
              </table>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import autoPage from '../utils/autoPage'
import VChart from 'vue-echarts'
import rollNum from '../components/rollNum'

export default {
  name: 'yubaom',
  components: {
    VChart,
    rollNum
  },
  extends: autoPage,
  data () {
    return {
      cityname: '东阳市',
      localYear: '2022',
      yearList: [
        {label: '2022年', value: '2022'},
        {label: '2021年', value: '2021'},
        {label: '2020年', value: '2020'},
        {label: '2019年', value: '2019'},
        {label: '2018年', value: '2018'}
      ],
      pie1data: [// 男女学生占比
        {name: '男', value: 5000, percent: 56},
        {name: '女', value: 4000, percent: 44}
      ],
      pie2data: [// 小学中学学生占比
        {name: '小学', value: 5000, percent: 56},
        {name: '中学', value: 4000, percent: 44}
      ],
      baomingdata: {
        offline: 234,
        online: 1234
      },
      realdata: [
        {
          name: '报名人数',
          value: [
            {name: '8', value: 123},
            {name: '9', value: 1025},
            {name: '11', value: 3123},
            {name: '12', value: 1523},
            {name: '13', value: 823},
            {name: '14', value: 623},
            {name: '15', value: 523}
          ]
        }

      ],
      top10data: [ // 区县预报名排行
        {city: '某某街道一', value: 34590, percent: 98},
        {city: '某某街道二', value: 31590, percent: 95},
        {city: '某某街道三', value: 30590, percent: 92},
        {city: '某某街道四', value: 29590, percent: 90}
      ],
      shengyuview: false,
      sorttype: 0, // 0正序1倒序
      middata: {
        yibaoming: 10900, // 当前已报名
        dqluqu: 1356, // 当前录取
        shengyuxuewei: 1000, // 剩余学位
        xiaoxuedata: [ // 小学
          {name: '报名人数', value: 1456, percent: 65, unit: '人'},
          {name: '学位数', value: 456, percent: 35, unit: '个'}
        ],
        zhongxuedata: [ // 小学
          {name: '报名人数', value: 1456, percent: 65, unit: '人'},
          {name: '学位数', value: 456, percent: 35, unit: '个'}
        ]
      },
      shengyuinfodata: [ // 剩余学位明细
        {name: '东阳中心小学', value: 1222},
        {name: '东阳中心小学', value: 1222},
        {name: '东阳中心小学', value: 1222},
        {name: '东阳中心小学', value: 1222},
        {name: '东阳中心小学', value: 1222},
        {name: '东阳中心小学', value: 1222},
        {name: '东阳中心小学', value: 1222},
        {name: '东阳中心小学', value: 1222},
        {name: '东阳中心小学', value: 1222},
        {name: '东阳中心小学', value: 1222},
        {name: '东阳中心小学', value: 1222},
        {name: '东阳中心小学', value: 1222}
      ],
      searchtxt: '', // 地图搜索
      localcity: '', // 选择的乡镇街道
      cityList: [ // 乡镇街道列表
        {label: '吴宁街道', value: '330783001'},
        {label: '南市街道', value: '330783003'},
        {label: '白云街道', value: '330783004'},
        {label: '江北街道', value: '330783005'},
        {label: '城东街道', value: '330783006'},
        {label: '六石街道', value: '330783007'},
        {label: '巍山镇', value: '330783106'},
        {label: '虎鹿镇', value: '330783107'},
        {label: '歌山镇', value: '330783108'},
        {label: '佐村镇', value: '330783109'},
        {label: '东阳江镇', value: '330783110'},
        {label: '湖溪镇', value: '330783112'},
        {label: '马宅镇', value: '330783114'},
        {label: '千祥镇', value: '330783116'},
        {label: '南马镇', value: '330783118'},
        {label: '画水镇', value: '330783122'},
        {label: '横店镇', value: '330783123'},
        {label: '三单乡', value: '330783201'}
      ],
      mapname: '某某某某市',
      mappopview: false,
      mapcontrol: 0, // 地图筛选控制，0:全部，1：人数90%以下，2：90-100%，3为超过计划招生人数
      schoolcontrol: 0, // 学校筛选控制，0：全部，1：小学，2：初中
      xuexiaotype: 0, // 学校类别
      schooldata: {
        type: '公办',
        name: '某某某某某学校',
        address: '某某省某某市某某区某某路123号',
        baomingdata: [
          {name: '已报名人数', value: 12000},
          {name: '剩余学位', value: 2269},
          {name: '计划招生', value: 14269},
          {name: '预报名人数', value: 23412}
        ],
        xuexiaodata: [
          {
            name: '上官飘飘',
            type: 'A',
            sex: '女',
            age: 14,
            address: '浙江省金华市东阳区吴宁街道中心路12号'
          },
          {
            name: '上官飘飘',
            type: 'A',
            sex: '女',
            age: 14,
            address: '浙江省金华市东阳区吴宁街道中心路12号'
          },
          {
            name: '上官飘飘',
            type: 'A',
            sex: '女',
            age: 14,
            address: '浙江省金华市东阳区吴宁街道中心路12号'
          },
          {
            name: '上官飘飘',
            type: 'A',
            sex: '女',
            age: 14,
            address: '浙江省金华市东阳区吴宁街道中心路12号'
          },
          {
            name: '上官飘飘',
            type: 'A',
            sex: '女',
            age: 14,
            address: '浙江省金华市东阳区吴宁街道中心路12号'
          },
          {
            name: '上官飘飘',
            type: 'A',
            sex: '女',
            age: 14,
            address: '浙江省金华市东阳区吴宁街道中心路12号'
          },
          {
            name: '上官飘飘',
            type: 'A',
            sex: '女',
            age: 14,
            address: '浙江省金华市东阳区吴宁街道中心路12号'
          },
          {
            name: '上官飘飘',
            type: 'A',
            sex: '女',
            age: 14,
            address: '浙江省金华市东阳区吴宁街道中心路12号'
          },
          {
            name: '上官飘飘',
            type: 'A',
            sex: '女',
            age: 14,
            address: '浙江省金华市东阳区吴宁街道中心路12号'
          },
          {
            name: '上官飘飘',
            type: 'A',
            sex: '女',
            age: 14,
            address: '浙江省金华市东阳区吴宁街道中心路12号'
          },
          {
            name: '上官飘飘',
            type: 'A',
            sex: '女',
            age: 14,
            address: '浙江省金华市东阳区吴宁街道中心路12号'
          }
        ]
      }

    }
  },
  computed: {
    chartpie1 () {
      let data = this.pie1data
      let color = ['rgba(7,124,220,1)', 'rgba(247,143,255,1)', '#46C88C', '#FFB936', '#F78FFF', '#6F8CFF']
      // let objData = this.array2obj(data, 'name')
      // let sum = 0
      // data.map(item => {
      //   sum += Number(item.value)
      // })
      // sum = parseFloat(sum).toFixed(2)
      return {
        title: {
          text: '{name|性别}',
          textAlign: 'center',
          left: '45%',
          top: '48%',
          textStyle: {
            rich: {
              name: {
                color: '#fff',
                fontSize: 14
              },
              value: {
                height: 20,
                color: '#53E2FF',
                fontSize: 16,
                fontFamily: 'DINPro-Medium'
              },
              unit: {
                fontSize: 14,
                color: 'rgba(255,255,255,0.72)'
              }
            }
          }
        },
        series: [{
          type: 'pie',
          center: ['47%', '51%'],
          radius: ['72%', '90%'],
          itemStyle: {
            color: params => color[params.dataIndex]
          },
          labelLine: {
            show: false
          },
          label: {
            show: false,
            position: 'center',
            fontSize: 14,
            lineHeight: 28,
            color: 'rgba(255,255,255,0.8)',
            formatter: params => {
              let str = `{per| ${params.percent}%}\n{name|${params.name}}`
              return str
            },
            rich: {
              name: {
                fontSize: 16,
                color: 'rgba(255,255,255,0.88)'
              },
              per: {
                fontSize: 20,
                color: '#fff',
                fontWeight: 'bold',
                fontFamily: 'DINPro-Medium'
              }
            }
          },
          z: 3,
          data: data.map(item => {
            return {
              ...item
              // emphasis: {
              //   label: {
              //     show: true
              //   }
              // }
            }
          })
        }]
      }
    },
    chartpie2 () {
      let data = this.pie2data
      return {
        title: {
          text: '{name|学校}',
          textAlign: 'center',
          left: '45%',
          top: '48%',
          textStyle: {
            rich: {
              name: {
                color: '#fff',
                fontSize: 14
              },
              value: {
                height: 20,
                color: '#53E2FF',
                fontSize: 16,
                fontFamily: 'DINPro-Medium'
              },
              unit: {
                fontSize: 14,
                color: 'rgba(255,255,255,0.72)'
              }
            }
          }
        },
        series: [
          {
            name: data[0].name,
            type: 'pie',
            clockWise: false,
            radius: ['75%', '85%'],
            center: ['50%', '50%'],
            itemStyle: {
              normal: {
                color: 'rgba(70,200,140,1)',
                label: {
                  show: false
                },
                labelLine: {
                  show: false
                }
              }
            },
            hoverAnimation: false,
            data: [{
              value: data[0].percent,
              label: {
                formatter: '{value|' + data[0].percent + '}',
                position: 'center',
                padding: [5, 0, 0, 0],
                show: false,
                textStyle: {
                  fontSize: 16,
                  color: '#53E2FF', // 跟随其他颜色
                  rich: {
                    value: {
                      fontSize: '16',
                      fontWeight: 'bold',
                      padding: [0, 0, 10, 0]
                    }
                  }
                }

              }
            }, {
              value: 100 - data[0].percent,
              name: 'invisible',
              itemStyle: {
                normal: {
                  color: '#043c70'
                }

              }
            }]
          },
          {
            name: '',
            type: 'pie',
            clockWise: false,
            radius: ['70%', '90%'],
            center: ['50%', '50%'],
            itemStyle: {
              normal: {
                color: '#043c70',
                label: {
                  show: false
                },
                labelLine: {
                  show: false
                }
              }
            },
            data: [100],
            z: 0
          },
          {
            name: data[1].name,
            type: 'pie',
            clockWise: false,
            radius: ['50%', '60%'],
            center: ['50%', '50%'],
            itemStyle: {
              normal: {
                color: 'rgba(255,185,54,1)',
                label: {
                  show: false
                },
                labelLine: {
                  show: false
                }
              }
            },
            hoverAnimation: false,
            data: [{
              value: data[1].percent,
              label: {
                formatter: '{value|' + data[1].percent + '}',
                position: 'center',
                padding: [5, 0, 0, 0],
                show: false,
                textStyle: {
                  fontSize: 16,
                  color: '#53E2FF', // 跟随其他颜色
                  rich: {
                    value: {
                      fontSize: '16',
                      fontWeight: 'bold',
                      padding: [0, 0, 10, 0]
                    }
                  }
                }

              }
            }, {
              value: 100 - data[1].percent,
              name: 'invisible',
              itemStyle: {
                normal: {
                  color: '#043c70'
                }

              }
            }]
          },
          {
            name: '',
            type: 'pie',
            clockWise: false,
            radius: ['45%', '65%'],
            center: ['50%', '50%'],
            itemStyle: {
              normal: {
                color: '#043c70',
                label: {
                  show: false
                },
                labelLine: {
                  show: false
                }
              }
            },
            data: [100],
            z: 0
          }
        ]
      }
    },
    chartLine () {
      let data = this.realdata
      let color = ['rgba(83,226,255', 'rgba(255,185,54', 'rgba(255, 160, 10, 1)']
      return {
        color: color,
        legend: {
          show: false,
          left: 'right',
          top: 10,
          itemGap: 25,
          icon: 'rect',
          itemWidth: 8,
          itemHeight: 8,
          padding: [0, 15, 0, 0],
          textStyle: {
            fontSize: 12,
            color: 'rgba(255,255,255,0.72)'
          }
        },
        tooltip: {
          trigger: 'axis',
          backgroundColor: 'rgba(3,32,64,0.80)',
          borderColor: '#3D5267',
          textStyle: {
            fontSize: 12,
            color: '#fff',
            fontStyle: 'normal',
            fontWeight: 'normal'
          }
        },
        textStyle: {
          fontFamily: 'Microsoft YaHei',
          fontSize: 12,
          color: '#fff',
          fontStyle: 'normal',
          fontWeight: 'normal'
        },
        grid: [
          {
            left: '4%',
            right: '4%',
            top: '20%',
            bottom: '8%',
            containLabel: true
          }
        ],
        xAxis: {
          type: 'category',
          // name: '类型',
          // nameLocation: 'start',
          // nameGap: 8,
          // nameTextStyle: {
          //   color: 'rgba(255,255,255,0.72)',
          //   verticalAlign: '0',
          //   fontSize: 16,
          //   padding: [12, 0, -22, 0]
          // },
          axisTick: false,
          axisLine: {
            show: true,
            lineStyle: {
              color: '#3D5267',
              width: 1,
              type: 'dashed'
            }
          },
          axisLabel: {
            margin: 10,
            textStyle: {
              fontSize: 12,
              color: 'rgba(255,255,255,0.72)'
            }
          }
        },
        yAxis: [{
          type: 'value',
          name: '人数：万人',
          nameTextStyle: {
            color: 'rgba(255,255,255,0.72)',
            fontSize: 12
          },
          splitNumber: 3,
          axisLine: {
            show: false,
            lineStyle: {
              color: 'rgba(255,255,255,0.16)',
              width: 1
            }
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: 'rgba(255,255,255,0.16)',
              width: 1,
              type: 'dashed'
            }
          },
          axisLabel: {
            textStyle: {
              fontSize: 12,
              color: 'rgba(255,255,255,0.72)'
            }
          }
        }],
        series: data.map((item, index) => {
          return {
            name: item.name,
            type: 'line',
            data: item.value.map(itm => [itm.name, itm.value ? itm.value : '']),
            itemStyle: {
              color: color[index] + ',1)'
            },
            areaStyle: {
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: color[index] + ',0.5)'
                  },
                  {
                    offset: 1,
                    color: color[index] + ', 0)'
                  }
                ],
                global: false
              }
            }
          }
        })
      }
    }
  },
  methods: {
    array2obj (array, key) {
      var resObj = {}
      for (var i = 0; i < array.length; i++) {
        resObj[array[i][key]] = array[i]
      }
      return resObj
    },
    compare (key) {
      return function (value1, value2) {
        var val1 = value1[key]
        var val2 = value2[key]
        return val2 - val1
      }
    },
    initBmap () {
      const myChart = this.$echarts.init(this.$refs.bmap)
      let option = {
        bmap: {
          key: 'fBjUPIfYMFpI8ybxrs5jnoE3wI96GW8d',
          center: [120.375678, 29.232405], // 当前视角中心位置的坐标
          roam: true,
          zoom: 12,
          mapStyle: {
            styleJson: require('../assets/json/map_config.json')
          }
        },
        series: [
          {
            type: 'custom',
            coordinateSystem: 'bmap',
            renderItem: this.renderItem,
            itemStyle: {
              opacity: 0.5
            },
            animation: false,
            silent: true,
            data: [0],
            z: -10
          }
        ]

      }
      myChart.setOption(option)
    },
    renderItem (params, api) {
      var coords = [
        [
          120.077067,
          29.098067
        ],
        [
          120.078824,
          29.096363
        ],
        [
          120.081109,
          29.097823
        ],
        [
          120.084484,
          29.093617
        ],
        [
          120.088324,
          29.094591
        ],
        [
          120.090657,
          29.092459
        ],
        [
          120.093347,
          29.093107
        ],
        [
          120.094933,
          29.091114
        ],
        [
          120.100235,
          29.08955
        ],
        [
          120.104791,
          29.092065
        ],
        [
          120.10661,
          29.096804
        ],
        [
          120.109565,
          29.099422
        ],
        [
          120.114167,
          29.101624
        ],
        [
          120.116981,
          29.095599
        ],
        [
          120.12233,
          29.0905
        ],
        [
          120.125969,
          29.0878
        ],
        [
          120.129701,
          29.086746
        ],
        [
          120.139668,
          29.095042
        ],
        [
          120.141767,
          29.09568
        ],
        [
          120.144504,
          29.094602
        ],
        [
          120.149277,
          29.094452
        ],
        [
          120.153398,
          29.091532
        ],
        [
          120.159415,
          29.091543
        ],
        [
          120.163785,
          29.088287
        ],
        [
          120.16775,
          29.088171
        ],
        [
          120.172492,
          29.093049
        ],
        [
          120.173705,
          29.093571
        ],
        [
          120.1754,
          29.091427
        ],
        [
          120.174203,
          29.089353
        ],
        [
          120.168356,
          29.085181
        ],
        [
          120.15772,
          29.076733
        ],
        [
          120.157549,
          29.074844
        ],
        [
          120.164158,
          29.077533
        ],
        [
          120.167376,
          29.074705
        ],
        [
          120.171559,
          29.073465
        ],
        [
          120.170564,
          29.070579
        ],
        [
          120.173223,
          29.068725
        ],
        [
          120.180655,
          29.066685
        ],
        [
          120.184496,
          29.066697
        ],
        [
          120.191416,
          29.062002
        ],
        [
          120.197791,
          29.060612
        ],
        [
          120.203637,
          29.062686
        ],
        [
          120.206871,
          29.065677
        ],
        [
          120.21009,
          29.066615
        ],
        [
          120.215579,
          29.065642
        ],
        [
          120.220073,
          29.06636
        ],
        [
          120.228096,
          29.062756
        ],
        [
          120.235498,
          29.061006
        ],
        [
          120.238887,
          29.054572
        ],
        [
          120.242153,
          29.053309
        ],
        [
          120.240038,
          29.048313
        ],
        [
          120.241671,
          29.039096
        ],
        [
          120.243754,
          29.033474
        ],
        [
          120.246071,
          29.031375
        ],
        [
          120.257515,
          29.026726
        ],
        [
          120.261574,
          29.025902
        ],
        [
          120.266814,
          29.026934
        ],
        [
          120.274837,
          29.025485
        ],
        [
          120.276734,
          29.023954
        ],
        [
          120.278118,
          29.018041
        ],
        [
          120.280248,
          29.015084
        ],
        [
          120.285768,
          29.009947
        ],
        [
          120.287789,
          29.008868
        ],
        [
          120.290464,
          29.009123
        ],
        [
          120.295409,
          29.011014
        ],
        [
          120.299374,
          29.010828
        ],
        [
          120.306946,
          29.008926
        ],
        [
          120.309247,
          29.01048
        ],
        [
          120.312062,
          29.009634
        ],
        [
          120.319681,
          29.009796
        ],
        [
          120.322184,
          29.006711
        ],
        [
          120.322122,
          29.003023
        ],
        [
          120.318484,
          28.997201
        ],
        [
          120.316245,
          28.996807
        ],
        [
          120.313788,
          28.994452
        ],
        [
          120.317768,
          28.988398
        ],
        [
          120.321889,
          28.986878
        ],
        [
          120.322169,
          28.98486
        ],
        [
          120.325636,
          28.984245
        ],
        [
          120.326429,
          28.981438
        ],
        [
          120.322713,
          28.979014
        ],
        [
          120.321593,
          28.974756
        ],
        [
          120.322464,
          28.971404
        ],
        [
          120.324486,
          28.968921
        ],
        [
          120.328902,
          28.96681
        ],
        [
          120.330612,
          28.967274
        ],
        [
          120.339584,
          28.974211
        ],
        [
          120.340937,
          28.977726
        ],
        [
          120.343129,
          28.978689
        ],
        [
          120.345415,
          28.982123
        ],
        [
          120.347467,
          28.982552
        ],
        [
          120.348525,
          28.979884
        ],
        [
          120.349364,
          28.971961
        ],
        [
          120.351417,
          28.969687
        ],
        [
          120.353112,
          28.96949
        ],
        [
          120.35633,
          28.971705
        ],
        [
          120.357683,
          28.971346
        ],
        [
          120.361477,
          28.967668
        ],
        [
          120.364634,
          28.966148
        ],
        [
          120.367417,
          28.968295
        ],
        [
          120.370107,
          28.968364
        ],
        [
          120.370869,
          28.970696
        ],
        [
          120.374927,
          28.974258
        ],
        [
          120.376047,
          28.977425
        ],
        [
          120.377882,
          28.978596
        ],
        [
          120.379126,
          28.981972
        ],
        [
          120.37684,
          28.98421
        ],
        [
          120.373217,
          28.982888
        ],
        [
          120.370884,
          28.98994
        ],
        [
          120.371211,
          28.993084
        ],
        [
          120.374585,
          28.995427
        ],
        [
          120.377135,
          28.994139
        ],
        [
          120.380634,
          28.996494
        ],
        [
          120.386092,
          28.997306
        ],
        [
          120.390321,
          29.000912
        ],
        [
          120.393664,
          29.001968
        ],
        [
          120.394752,
          29.00518
        ],
        [
          120.394224,
          29.008451
        ],
        [
          120.395048,
          29.011605
        ],
        [
          120.397645,
          29.014075
        ],
        [
          120.403367,
          29.01796
        ],
        [
          120.406368,
          29.021635
        ],
        [
          120.408856,
          29.027468
        ],
        [
          120.404859,
          29.030088
        ],
        [
          120.404595,
          29.0317
        ],
        [
          120.406383,
          29.034413
        ],
        [
          120.411686,
          29.03956
        ],
        [
          120.412199,
          29.04385
        ],
        [
          120.407658,
          29.047722
        ],
        [
          120.406539,
          29.049414
        ],
        [
          120.408949,
          29.060948
        ],
        [
          120.410504,
          29.063011
        ],
        [
          120.41366,
          29.069548
        ],
        [
          120.417034,
          29.072086
        ],
        [
          120.422508,
          29.073697
        ],
        [
          120.42823,
          29.076131
        ],
        [
          120.437342,
          29.078333
        ],
        [
          120.443872,
          29.077846
        ],
        [
          120.448319,
          29.078298
        ],
        [
          120.451429,
          29.080905
        ],
        [
          120.453109,
          29.087476
        ],
        [
          120.454353,
          29.088461
        ],
        [
          120.46177,
          29.089782
        ],
        [
          120.465159,
          29.089376
        ],
        [
          120.473447,
          29.085042
        ],
        [
          120.479636,
          29.085089
        ],
        [
          120.480242,
          29.078031
        ],
        [
          120.483787,
          29.07525
        ],
        [
          120.483741,
          29.069119
        ],
        [
          120.486866,
          29.067995
        ],
        [
          120.49307,
          29.067137
        ],
        [
          120.494718,
          29.068597
        ],
        [
          120.496024,
          29.07219
        ],
        [
          120.492075,
          29.077799
        ],
        [
          120.493925,
          29.087766
        ],
        [
          120.490784,
          29.089724
        ],
        [
          120.49136,
          29.095738
        ],
        [
          120.494889,
          29.104578
        ],
        [
          120.49817,
          29.108738
        ],
        [
          120.49803,
          29.116395
        ],
        [
          120.492992,
          29.127458
        ],
        [
          120.48996,
          29.129149
        ],
        [
          120.477054,
          29.130574
        ],
        [
          120.47354,
          29.132497
        ],
        [
          120.471721,
          29.136122
        ],
        [
          120.471037,
          29.140222
        ],
        [
          120.473198,
          29.145781
        ],
        [
          120.475437,
          29.1487
        ],
        [
          120.478656,
          29.151329
        ],
        [
          120.49066,
          29.152093
        ],
        [
          120.500223,
          29.157107
        ],
        [
          120.506598,
          29.161867
        ],
        [
          120.511247,
          29.161959
        ],
        [
          120.51571,
          29.160871
        ],
        [
          120.521992,
          29.155579
        ],
        [
          120.530264,
          29.155509
        ],
        [
          120.537681,
          29.156447
        ],
        [
          120.54205,
          29.158798
        ],
        [
          120.551768,
          29.168258
        ],
        [
          120.553214,
          29.170759
        ],
        [
          120.554785,
          29.176051
        ],
        [
          120.559403,
          29.182071
        ],
        [
          120.55945,
          29.186713
        ],
        [
          120.56301,
          29.19124
        ],
        [
          120.569168,
          29.193393
        ],
        [
          120.579057,
          29.197502
        ],
        [
          120.587252,
          29.201496
        ],
        [
          120.593658,
          29.207017
        ],
        [
          120.600468,
          29.21594
        ],
        [
          120.602505,
          29.223104
        ],
        [
          120.601028,
          29.228254
        ],
        [
          120.601946,
          29.229527
        ],
        [
          120.605973,
          29.23051
        ],
        [
          120.616142,
          29.235579
        ],
        [
          120.619703,
          29.236123
        ],
        [
          120.626482,
          29.235961
        ],
        [
          120.630649,
          29.238541
        ],
        [
          120.633231,
          29.242984
        ],
        [
          120.632951,
          29.246895
        ],
        [
          120.636496,
          29.250123
        ],
        [
          120.640041,
          29.254588
        ],
        [
          120.64455,
          29.259066
        ],
        [
          120.644364,
          29.261148
        ],
        [
          120.650444,
          29.26574
        ],
        [
          120.65276,
          29.268181
        ],
        [
          120.657332,
          29.271432
        ],
        [
          120.664951,
          29.275931
        ],
        [
          120.668496,
          29.276521
        ],
        [
          120.672352,
          29.276197
        ],
        [
          120.677437,
          29.274127
        ],
        [
          120.681713,
          29.270391
        ],
        [
          120.687342,
          29.269789
        ],
        [
          120.68927,
          29.266435
        ],
        [
          120.68658,
          29.264653
        ],
        [
          120.689348,
          29.260604
        ],
        [
          120.690312,
          29.262201
        ],
        [
          120.693748,
          29.261426
        ],
        [
          120.695925,
          29.262374
        ],
        [
          120.696469,
          29.264977
        ],
        [
          120.701818,
          29.263068
        ],
        [
          120.706949,
          29.2591
        ],
        [
          120.709717,
          29.259008
        ],
        [
          120.717119,
          29.262467
        ],
        [
          120.719249,
          29.265717
        ],
        [
          120.71886,
          29.269673
        ],
        [
          120.720275,
          29.274948
        ],
        [
          120.722436,
          29.278048
        ],
        [
          120.728905,
          29.283507
        ],
        [
          120.731906,
          29.291476
        ],
        [
          120.737053,
          29.300542
        ],
        [
          120.734689,
          29.306451
        ],
        [
          120.72906,
          29.310163
        ],
        [
          120.725935,
          29.310244
        ],
        [
          120.722965,
          29.308128
        ],
        [
          120.720431,
          29.303202
        ],
        [
          120.717227,
          29.301618
        ],
        [
          120.711505,
          29.302115
        ],
        [
          120.708613,
          29.305098
        ],
        [
          120.706312,
          29.310625
        ],
        [
          120.703529,
          29.315007
        ],
        [
          120.699859,
          29.318858
        ],
        [
          120.69975,
          29.321621
        ],
        [
          120.701787,
          29.324083
        ],
        [
          120.705908,
          29.332823
        ],
        [
          120.707851,
          29.341308
        ],
        [
          120.707462,
          29.346914
        ],
        [
          120.704679,
          29.347585
        ],
        [
          120.697418,
          29.34184
        ],
        [
          120.694215,
          29.341424
        ],
        [
          120.687948,
          29.341863
        ],
        [
          120.684916,
          29.338939
        ],
        [
          120.67935,
          29.334673
        ],
        [
          120.673596,
          29.328188
        ],
        [
          120.670207,
          29.325529
        ],
        [
          120.660286,
          29.33043
        ],
        [
          120.653662,
          29.334303
        ],
        [
          120.650381,
          29.334002
        ],
        [
          120.645748,
          29.328419
        ],
        [
          120.643851,
          29.328188
        ],
        [
          120.641223,
          29.330766
        ],
        [
          120.631474,
          29.332858
        ],
        [
          120.624088,
          29.336338
        ],
        [
          120.621444,
          29.336442
        ],
        [
          120.616142,
          29.335286
        ],
        [
          120.61255,
          29.333621
        ],
        [
          120.60731,
          29.335158
        ],
        [
          120.600982,
          29.334164
        ],
        [
          120.59697,
          29.341424
        ],
        [
          120.593036,
          29.346625
        ],
        [
          120.590999,
          29.348475
        ],
        [
          120.58621,
          29.348983
        ],
        [
          120.583629,
          29.347088
        ],
        [
          120.579135,
          29.340094
        ],
        [
          120.573973,
          29.339967
        ],
        [
          120.571531,
          29.342649
        ],
        [
          120.572573,
          29.347018
        ],
        [
          120.575077,
          29.349781
        ],
        [
          120.578497,
          29.356427
        ],
        [
          120.577067,
          29.358692
        ],
        [
          120.570583,
          29.363396
        ],
        [
          120.566696,
          29.367302
        ],
        [
          120.563617,
          29.367417
        ],
        [
          120.559201,
          29.366238
        ],
        [
          120.55648,
          29.367487
        ],
        [
          120.553774,
          29.371473
        ],
        [
          120.559372,
          29.377448
        ],
        [
          120.559481,
          29.379608
        ],
        [
          120.552779,
          29.387408
        ],
        [
          120.550509,
          29.390943
        ],
        [
          120.548534,
          29.391417
        ],
        [
          120.542392,
          29.389845
        ],
        [
          120.53779,
          29.391925
        ],
        [
          120.530808,
          29.399215
        ],
        [
          120.524122,
          29.401133
        ],
        [
          120.522785,
          29.403166
        ],
        [
          120.519177,
          29.411195
        ],
        [
          120.513875,
          29.415561
        ],
        [
          120.511154,
          29.41943
        ],
        [
          120.511682,
          29.426765
        ],
        [
          120.511076,
          29.431373
        ],
        [
          120.511838,
          29.4403
        ],
        [
          120.514792,
          29.450311
        ],
        [
          120.515896,
          29.451755
        ],
        [
          120.520001,
          29.454006
        ],
        [
          120.522178,
          29.457008
        ],
        [
          120.520235,
          29.458625
        ],
        [
          120.516969,
          29.466083
        ],
        [
          120.515243,
          29.468554
        ],
        [
          120.512647,
          29.469223
        ],
        [
          120.506256,
          29.468623
        ],
        [
          120.503239,
          29.469443
        ],
        [
          120.497766,
          29.46651
        ],
        [
          120.496444,
          29.466787
        ],
        [
          120.497735,
          29.471024
        ],
        [
          120.497766,
          29.474349
        ],
        [
          120.493848,
          29.477962
        ],
        [
          120.481999,
          29.484854
        ],
        [
          120.474862,
          29.492876
        ],
        [
          120.469902,
          29.495207
        ],
        [
          120.469233,
          29.490925
        ],
        [
          120.46404,
          29.48924
        ],
        [
          120.461443,
          29.484946
        ],
        [
          120.453264,
          29.482799
        ],
        [
          120.445039,
          29.479625
        ],
        [
          120.440794,
          29.479625
        ],
        [
          120.437326,
          29.47862
        ],
        [
          120.433112,
          29.479648
        ],
        [
          120.427779,
          29.477224
        ],
        [
          120.425415,
          29.474592
        ],
        [
          120.422725,
          29.469235
        ],
        [
          120.417206,
          29.460518
        ],
        [
          120.412992,
          29.451974
        ],
        [
          120.410395,
          29.450646
        ],
        [
          120.402325,
          29.453025
        ],
        [
          120.39878,
          29.455565
        ],
        [
          120.3927,
          29.455276
        ],
        [
          120.387849,
          29.456593
        ],
        [
          120.383992,
          29.456154
        ],
        [
          120.379545,
          29.452621
        ],
        [
          120.376187,
          29.449145
        ],
        [
          120.370807,
          29.447944
        ],
        [
          120.367324,
          29.445554
        ],
        [
          120.364432,
          29.433879
        ],
        [
          120.366111,
          29.431604
        ],
        [
          120.369983,
          29.428647
        ],
        [
          120.373668,
          29.417536
        ],
        [
          120.372828,
          29.414914
        ],
        [
          120.367448,
          29.415572
        ],
        [
          120.363032,
          29.415307
        ],
        [
          120.357434,
          29.413389
        ],
        [
          120.343673,
          29.410224
        ],
        [
          120.340703,
          29.40625
        ],
        [
          120.334064,
          29.403212
        ],
        [
          120.333442,
          29.401168
        ],
        [
          120.333286,
          29.395149
        ],
        [
          120.330441,
          29.389118
        ],
        [
          120.327269,
          29.384519
        ],
        [
          120.325325,
          29.380637
        ],
        [
          120.317271,
          29.379701
        ],
        [
          120.312575,
          29.374859
        ],
        [
          120.308423,
          29.366377
        ],
        [
          120.306604,
          29.365164
        ],
        [
          120.30068,
          29.3635
        ],
        [
          120.29631,
          29.361477
        ],
        [
          120.299032,
          29.356646
        ],
        [
          120.2953,
          29.354808
        ],
        [
          120.292112,
          29.354577
        ],
        [
          120.28992,
          29.355583
        ],
        [
          120.287836,
          29.359339
        ],
        [
          120.283731,
          29.361916
        ],
        [
          120.278289,
          29.363453
        ],
        [
          120.274697,
          29.366065
        ],
        [
          120.271509,
          29.369324
        ],
        [
          120.26672,
          29.376558
        ],
        [
          120.26599,
          29.383202
        ],
        [
          120.261356,
          29.390342
        ],
        [
          120.261325,
          29.39464
        ],
        [
          120.26403,
          29.400833
        ],
        [
          120.25568,
          29.402369
        ],
        [
          120.251731,
          29.402612
        ],
        [
          120.248668,
          29.401179
        ],
        [
          120.247828,
          29.397378
        ],
        [
          120.25002,
          29.393219
        ],
        [
          120.248668,
          29.39092
        ],
        [
          120.247673,
          29.385755
        ],
        [
          120.24548,
          29.379839
        ],
        [
          120.242619,
          29.37442
        ],
        [
          120.240629,
          29.372259
        ],
        [
          120.240007,
          29.368596
        ],
        [
          120.238063,
          29.366527
        ],
        [
          120.234673,
          29.364678
        ],
        [
          120.234502,
          29.36135
        ],
        [
          120.236539,
          29.359351
        ],
        [
          120.237084,
          29.355409
        ],
        [
          120.236446,
          29.343932
        ],
        [
          120.230133,
          29.339667
        ],
        [
          120.225966,
          29.336222
        ],
        [
          120.219637,
          29.331841
        ],
        [
          120.217056,
          29.327875
        ],
        [
          120.209219,
          29.326997
        ],
        [
          120.206498,
          29.325205
        ],
        [
          120.202347,
          29.31362
        ],
        [
          120.199579,
          29.311666
        ],
        [
          120.198677,
          29.313493
        ],
        [
          120.196609,
          29.309897
        ],
        [
          120.197029,
          29.306289
        ],
        [
          120.195427,
          29.302913
        ],
        [
          120.191213,
          29.303421
        ],
        [
          120.188057,
          29.305133
        ],
        [
          120.185134,
          29.304774
        ],
        [
          120.175882,
          29.305295
        ],
        [
          120.170533,
          29.306324
        ],
        [
          120.167703,
          29.309446
        ],
        [
          120.165635,
          29.308671
        ],
        [
          120.162603,
          29.303236
        ],
        [
          120.160924,
          29.301398
        ],
        [
          120.157332,
          29.301386
        ],
        [
          120.156088,
          29.294332
        ],
        [
          120.155124,
          29.291823
        ],
        [
          120.148515,
          29.286861
        ],
        [
          120.146261,
          29.283125
        ],
        [
          120.14738,
          29.281402
        ],
        [
          120.155855,
          29.276567
        ],
        [
          120.157829,
          29.272681
        ],
        [
          120.155046,
          29.269338
        ],
        [
          120.156476,
          29.265926
        ],
        [
          120.155015,
          29.262941
        ],
        [
          120.15573,
          29.260928
        ],
        [
          120.158296,
          29.259517
        ],
        [
          120.163925,
          29.254507
        ],
        [
          120.164438,
          29.251592
        ],
        [
          120.161266,
          29.247369
        ],
        [
          120.157891,
          29.245853
        ],
        [
          120.151143,
          29.238842
        ],
        [
          120.14469,
          29.239733
        ],
        [
          120.143882,
          29.242313
        ],
        [
          120.142404,
          29.242822
        ],
        [
          120.135454,
          29.239929
        ],
        [
          120.133215,
          29.239941
        ],
        [
          120.1325,
          29.238425
        ],
        [
          120.136449,
          29.234491
        ],
        [
          120.131567,
          29.228289
        ],
        [
          120.127928,
          29.226506
        ],
        [
          120.122533,
          29.216959
        ],
        [
          120.119361,
          29.212827
        ],
        [
          120.113079,
          29.207353
        ],
        [
          120.105739,
          29.204216
        ],
        [
          120.10591,
          29.199459
        ],
        [
          120.107823,
          29.195465
        ],
        [
          120.104884,
          29.188184
        ],
        [
          120.094171,
          29.181944
        ],
        [
          120.091901,
          29.179894
        ],
        [
          120.091527,
          29.177718
        ],
        [
          120.092694,
          29.17194
        ],
        [
          120.09414,
          29.170516
        ],
        [
          120.08991,
          29.167043
        ],
        [
          120.091574,
          29.162029
        ],
        [
          120.090859,
          29.159898
        ],
        [
          120.087376,
          29.157628
        ],
        [
          120.08649,
          29.155359
        ],
        [
          120.086085,
          29.149719
        ],
        [
          120.084981,
          29.144403
        ],
        [
          120.08467,
          29.137964
        ],
        [
          120.085277,
          29.136249
        ],
        [
          120.089646,
          29.131616
        ],
        [
          120.091123,
          29.129172
        ],
        [
          120.093082,
          29.121794
        ],
        [
          120.092865,
          29.115955
        ],
        [
          120.091325,
          29.112966
        ],
        [
          120.086645,
          29.110649
        ],
        [
          120.084017,
          29.106108
        ],
        [
          120.084017,
          29.104845
        ],
        [
          120.08722,
          29.098484
        ],
        [
          120.086225,
          29.09707
        ],
        [
          120.081887,
          29.098611
        ],
        [
          120.077067,
          29.098067
        ]
      ]
      var points = []
      for (var i = 0; i < coords.length; i++) {
        points.push(api.coord(coords[i]))
      }
      return {
        type: 'polygon',
        shape: {
          points: this.$echarts.graphic.clipPointsByRect(points, {
            x: params.coordSys.x,
            y: params.coordSys.y,
            width: params.coordSys.width,
            height: params.coordSys.height
          })
        },
        style: api.style({
          fill: 'rgba(0,0,0,0.1)', // color
          stroke: '#34B2FF'
        })
      }
    }
  },
  mounted () {
    this.initBmap()
  },
  created () {
  },
  watch: {}
}
</script>

<style scoped lang="less">

.container {
  position: relative;
  background: #020317;
  width: 1920px;
  height: 1080px;
  transform-origin: top left;
  overflow: hidden;
  display: flex;
  flex-direction: column;

  &_top {
    width: 100%;
    height: 72px;
    background: url("../assets/img/page/titlebg.svg") no-repeat left top /100% 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .topleft {
      width: 516px;
      height: 40px;
      background: url("../assets/img/page/menu_3.svg") no-repeat left top /100% 100%;
      margin-left: 20px;
      display: flex;

      p {
        width: 138px;
        height: 40px;
        line-height: 40px;
        font-size: 16px;
        color: #53E2FF;
        letter-spacing: 0.96px;
        text-align: center;
        cursor: pointer;

        &.active {
          color: #B4F2FF;
          font-weight: bold;
        }
      }
    }

    .topright {
      width: 516px;
      margin-right: 20px;
      display: flex;
      justify-content: end;
      align-items: center;
    }

    p {
      flex: 1;
      font-size: 32px;
      letter-spacing: 1.92px;
      text-align: center;
      line-height: 72px;
      font-weight: 700;
      background-image: linear-gradient(to bottom, #fff, #B6EAFF);
      -webkit-background-clip: text;
      color: transparent;
    }
  }

  &_body {
    height: 960px;
    padding: 24px;
    display: flex;
    position: relative;

    .infobox {
      width: 450px;
      position: absolute;
      top: 150px;
      right: 490px;
      z-index: 99999;

      &_top {
        width: 100%;
        height: 40px;
        background: url("../assets/img/page/popbg.svg") no-repeat left top;

        .infotitle {
          height: 40px;
          line-height: 40px;
          text-align: center;
          font-size: 16px;
          color: #53E2FF;
          letter-spacing: 0.96px;
          font-weight: bold;

          &:before {
            width: 32px;
            height: 32px;
            content: '';
            display: inline-block;
            vertical-align: middle;
            padding-right: 15px;
            background: url(../assets/img/page/titleleft.svg) no-repeat left center;
            animation: cubeshow1 3s linear infinite forwards;
          }

          &:after {
            width: 32px;
            height: 32px;
            content: '';
            display: inline-block;
            vertical-align: middle;
            padding-left: 15px;
            background: url(../assets/img/page/titleright.svg) no-repeat right center;
            animation: cubeshow2 3s linear infinite forwards;
          }
        }
      }

      &_body {
        min-height: 300px;
        background: rgba(3, 46, 82, 0.80);
        padding: 20px;
      }

      &_bottom {
        width: 100%;
        height: 40px;
        background: url("../assets/img/page/popbg.svg") no-repeat left bottom;
        margin-top: -1px;
      }
    }

    .sidebox {
      width: 450px;
      height: 960px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      z-index: 2;
    }

    .bmap {
      width: 1500px;
      height: 100%;
      position: absolute;
      left: 210px;
      top: 0;
      z-index: 1;
    }

    .midbox {
      flex: 1;
      margin: 0 24px;
      position: relative;
      z-index: 2;

      .mapcontrolbox {
        display: flex;

        p {
          line-height: 36px;
          font-size: 14px;
          color: #FFFFFF;
          letter-spacing: 0.84px;
          cursor: pointer;
          margin-right: 15px;

          &.blue {
            &:before {
              content: '';
              width: 14px;
              height: 14px;
              background: rgba(14, 45, 80, 0.5);
              border: 1px solid rgba(52, 178, 255, 1);
              display: inline-block;
              vertical-align: middle;
              margin-right: 10px;
            }

            &.active {
              &:before {
                content: '✔';
                width: 14px;
                height: 14px;
                line-height: 14px;
                text-align: center;
                background: rgba(14, 45, 80, 0.5);
                border: 1px solid rgba(52, 178, 255, 1);
                display: inline-block;
                vertical-align: middle;
                margin-right: 10px;
                color: rgba(52, 178, 255, 1)
              }
            }
          }

          &.green {
            &:before {
              content: '';
              width: 14px;
              height: 14px;
              background: rgba(2, 63, 34, 0.5);
              border: 1px solid rgba(0, 255, 61, 1);
              display: inline-block;
              vertical-align: middle;
              margin-right: 10px;
            }

            &.active {
              &:before {
                content: '✔';
                width: 14px;
                height: 14px;
                line-height: 14px;
                text-align: center;
                background: rgba(2, 63, 34, 0.5);
                border: 1px solid rgba(0, 255, 61, 1);
                display: inline-block;
                vertical-align: middle;
                margin-right: 10px;
                color: rgba(0, 255, 61, 1)
              }
            }
          }

          &.lightblue {
            &:before {
              content: '';
              width: 14px;
              height: 14px;
              background: rgba(0, 255, 243, 0.24);
              border: 1px solid #00FFF3;
              display: inline-block;
              vertical-align: middle;
              margin-right: 10px;
            }

            &.active {
              &:before {
                content: '✔';
                width: 14px;
                height: 14px;
                line-height: 14px;
                text-align: center;
                background: rgba(0, 255, 243, 0.24);
                border: 1px solid #00FFF3;
                display: inline-block;
                vertical-align: middle;
                margin-right: 10px;
                color: #00FFF3
              }
            }
          }

          &.yellow {
            &:before {
              content: '';
              width: 14px;
              height: 14px;
              background: rgba(63, 46, 32, 0.5);
              border: 1px solid rgba(255, 185, 54, 1);
              display: inline-block;
              vertical-align: middle;
              margin-right: 10px;
            }

            &.active {
              &:before {
                content: '✔';
                width: 14px;
                height: 14px;
                line-height: 14px;
                text-align: center;
                background: rgba(63, 46, 32, 0.5);
                border: 1px solid rgba(255, 185, 54, 1);
                display: inline-block;
                vertical-align: middle;
                margin-right: 10px;
                color: rgba(255, 185, 54, 1)
              }
            }
          }

          &.red {
            &:before {
              content: '';
              width: 14px;
              height: 14px;
              background: rgba(67, 0, 0, 0.5);
              border: 1px solid rgba(255, 0, 0, 1);
              display: inline-block;
              vertical-align: middle;
              margin-right: 10px;
            }

            &.active {
              &:before {
                content: '✔';
                width: 14px;
                height: 14px;
                line-height: 14px;
                text-align: center;
                background: rgba(67, 0, 0, 0.5);
                border: 1px solid rgba(255, 0, 0, 1);
                display: inline-block;
                vertical-align: middle;
                margin-right: 10px;
                color: rgba(255, 0, 0, 1)
              }
            }
          }
        }
      }

      .shengyubox {
        width: 450px;
        position: absolute;
        left: 30px;
        top: 80px;
        min-height: 300px;
        z-index: 23;

        &::after {
          content: '';
          width: 450px;
          height: 40px;
          display: block;
          background: url("../assets/img/page/popbg.svg") no-repeat left bottom;
        }

        .shengyutop {
          width: 450px;
          height: 40px;
          background: url("../assets/img/page/popbg.svg") no-repeat left top;
        }

        .shengyucontent {
          background: rgba(3, 46, 82, 0.80);

          .shengyubody {
            padding: 16px;
          }
        }
      }

      .mapbigbox {
        width: 100%;
        height: 32px;
        position: absolute;
        left: 0;
        bottom: 80px;
        display: flex;
        justify-content: center;
        align-items: center;

        div {
          width: 100px;
          background: #0D2246;
          border: 1px solid rgba(7, 124, 220, 1);
          border-radius: 16px;
          display: flex;
          justify-content: space-between;
          cursor: pointer;

          &:hover {
            border: 1px solid #53E2FF;
          }

          p {
            width: 32px;
            height: 32px;
            line-height: 27px;
            margin-left: 12px;
            margin-right: 12px;
            text-align: center;
            color: rgba(7, 124, 220, 1);
            font-size: 32px;
            font-weight: bold;
            cursor: pointer;

            &:hover {
              color: #53E2FF
            }
          }
        }
      }

      .schoolcontrolbox {
        width: 100%;
        height: 40px;
        position: absolute;
        left: 0;
        bottom: 0;
        display: flex;
        justify-content: center;
        align-items: center;

        p {
          width: 158px;
          height: 40px;
          line-height: 40px;
          text-align: center;
          font-size: 16px;
          color: #53E2FF;
          letter-spacing: 0.96px;
          cursor: pointer;

          &.active {
            font-size: 16px;
            background-image: linear-gradient(to bottom, #fff, #B6EAFF);
            -webkit-background-clip: text;
            color: transparent;
            letter-spacing: 0.96px;
            font-weight: bold;
          }
        }

        &.school0 {
          background: url(../assets/img/page/school0.svg) no-repeat left bottom;
        }

        &.school1 {
          background: url(../assets/img/page/school1.svg) no-repeat left bottom;
        }

        &.school2 {
          background: url(../assets/img/page/school2.svg) no-repeat left bottom;
        }

      }

      .mapname {
        background: url("../assets/img/page/mapdot.svg") no-repeat left center;
        padding-left: 40px;

        p {
          font-size: 20px;
          font-weight: bold;
          letter-spacing: 1.2px;
          background-image: linear-gradient(to bottom, #fff, #B6EAFF);
          -webkit-background-clip: text;
          color: transparent;
        }
      }

      .midtopbox {
        width: 100%;
        height: 104px;
        background-image: linear-gradient(180deg, rgba(7, 124, 220, 0.00) 0%, rgba(7, 124, 220, 0.24) 100%);

        .midtjbox1 {
          border-right: 1px solid rgba(255, 255, 255, 0.24);
          padding: 0 10px;
          display: flex;
          flex-direction: column;
          justify-content: center;

          &.midtj0 {
            width: 400px;
            background: url("../assets/img/page/pdot1.svg") no-repeat left center;
            padding-left: 75px;
          }

          .midtopcontent {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
          }
        }

      }
    }
  }

  .tjlist {

    margin-top: 10px;

    &.tjlist0 {
      p {
        &:before {
          width: 8px;
          height: 8px;
          content: '';
          background: #077CDC;
          display: inline-block;
          margin-right: 10px;
          vertical-align: middle;
        }
      }

    }

    &.tjlist1 {
      p {
        &:before {
          width: 8px;
          height: 8px;
          content: '';
          background: #46C88C;
          display: inline-block;
          margin-right: 10px;
          vertical-align: middle;
        }
      }

    }
  }

  .progressbox1 {
    width: 190px;
    height: 8px;
    background: rgba(7, 124, 220, .12);
    margin-right: 10px;
    margin-top: 5px;
    display: flex;

    .progresscurbox0 {
      height: 8px;
      background: url("../assets/img/page/picon0.png") repeat-x left top;
    }

    .progresscurbox1 {
      height: 8px;
      background: url("../assets/img/page/picon1.png") repeat-x left top;
    }
  }

  .popbox {
    width: 450px;
    height: 768px;
    background: url("../assets/img/page/popbg.svg") no-repeat left top;
    position: absolute;
    top: 220px;
    left: 600px;
    z-index: 99;

    &_content {
      height: 730px;
      padding: 16px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;

      .popboxtitle {
        line-height: 32px;
        font-size: 14px;
        color: #fff;
        letter-spacing: 0.84px;
      }

      .tjbox1 {
        width: 200px;
        height: 146px;
        background: url("../assets/img/page/tjbg1.svg") no-repeat left top;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        align-items: center;

        p {
          font-size: 14px;
          color: #fff;

          &.tjval {
            height: 70px;
            width: 100%;
            text-align: center;
            background: url("../assets/img/page/dotbottom.svg") no-repeat center bottom;
          }

          span {
            font-size: 20px;
            //color: #53E2FF;
            letter-spacing: 1.2px;
          }
        }
      }

      .tjbox2 {
        width: 100%;
        height: 40px;
        background: rgba(7, 124, 220, .12);
        border-top: 1px solid rgba(7, 124, 220, 0.24);
        border-bottom: 1px solid rgba(7, 124, 220, 0.24);
        position: relative;
        display: flex;

        &:before {
          content: '';
          width: 24px;
          height: 1px;
          position: absolute;
          left: 0;
          top: -1px;
          background: #077CDC;
        }

        &:after {
          content: '';
          width: 24px;
          height: 1px;
          position: absolute;
          right: 0;
          bottom: -1px;
          background: #077CDC;
        }

        p {
          line-height: 40px;
          font-size: 14px;
          color: #fff;
          padding-left: 10px;

          span {
            font-size: 20px;
            font-weight: bold;
            color: #53E2FF;
            letter-spacing: 0.8px;
          }

          b {
            font-size: 14px;
            font-weight: normal;
            color: #53E2FF;
          }
        }
      }
    }
  }
}

.poptitlebox {
  height: 64px;
  background: url("../assets/img/page/popdot1.svg") no-repeat left center;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  padding-left: 75px;
  padding-bottom: 30px;
  border-bottom: 1px solid rgba(7, 124, 220, 0.24);
  position: relative;

  &:before {
    content: '';
    width: 24px;
    height: 1px;
    position: absolute;
    left: 0;
    bottom: -1px;
    background: #077CDC;
  }

  &:after {
    content: '';
    width: 24px;
    height: 1px;
    position: absolute;
    right: 0;
    bottom: -1px;
    background: #077CDC;
  }

  .poptype {
    width: 46px;
    height: 20px;
    line-height: 20px;
    background: #F07700;
    border-radius: 4px;
    text-align: center;
    font-size: 14px;
    color: #fff;
    margin-right: 15px;
  }

  .poptitle {
    font-size: 20px;
    font-weight: bold;
    letter-spacing: 1.2px;
    background-image: linear-gradient(to bottom, #fff, #B6EAFF);
    -webkit-background-clip: text;
    color: transparent;
  }

  .topopinfo {
    font-size: 16px;
    color: #53E2FF;
    letter-spacing: 0.96px;
    position: absolute;
    right: 0;
    background: url("../assets/img/page/toinfo.svg") no-repeat right center;
    padding-left: 15px;
    padding-right: 20px;
    text-align: right;
  }
}

.subtitle {
  width: 100%;
  height: 50px;
  display: flex;
  flex-direction: column;

  p {
    line-height: 50px;
    font-weight: bold;
    font-size: 16px;
    color: #53E2FF;
    letter-spacing: 0.96px;

    &:before {
      width: 32px;
      height: 32px;
      content: '';
      display: inline-block;
      vertical-align: middle;
      padding-right: 15px;
      background: url(../assets/img/page/titleleft.svg) no-repeat left center;
      animation: cubeshow1 3s linear infinite forwards;
    }
  }
}

.maintitle {
  width: 100%;
  height: 32px;
  background: url("../assets/img/page/maintitle.svg") no-repeat left top;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  p {
    line-height: 32px;
    text-align: center;
    font-size: 20px;
    font-weight: bold;
    letter-spacing: 1.2px;
    background-image: linear-gradient(to bottom, #fff, #B6EAFF);
    -webkit-background-clip: text;
    color: transparent;

    &:before {
      width: 32px;
      height: 32px;
      content: '';
      display: inline-block;
      vertical-align: middle;
      padding-right: 15px;
      background: url(../assets/img/page/titleleft.svg) no-repeat left center;
      animation: cubeshow1 3s linear infinite forwards;
    }

    &:after {
      width: 32px;
      height: 32px;
      content: '';
      display: inline-block;
      vertical-align: middle;
      padding-left: 15px;
      background: url(../assets/img/page/titleright.svg) no-repeat right center;
      animation: cubeshow2 3s linear infinite forwards;
    }
  }
}

@keyframes cubeshow2 {
  0% {
    opacity: 0;
    transform: translateX(-10px);
    // transform: rotate(0) scale(0);
  }
  50% {
    opacity: 1;
    transform: translateX(0);
    // transform: rotate(0) scale(0.4);
  }
  100% {
    opacity: 0;
    transform: translateX(10px);
    //  transform: rotate(0) scale(1);
  }
}

@keyframes cubeshow1 {
  0% {
    opacity: 0;
    transform: translateX(10px);
    // transform: rotate(0) scale(0);
  }
  50% {
    opacity: 1;
    transform: translateX(0);
    // transform: rotate(0) scale(0.4);
  }
  100% {
    opacity: 0;
    transform: translateX(-10px);
    //  transform: rotate(0) scale(1);
  }
}

.rightbox {
  width: 100%;
  height: 840px;
  background: url("../assets/img/page/rightbg.svg") no-repeat left top;
  position: relative;

  &::after {
    content: '';
    width: 100%;
    height: 10px;
    background: url("../assets/img/page/rightbg.svg") no-repeat left bottom;
    position: absolute;
    left: 0;
    bottom: 0;
  }

  &_content {
    padding: 16px;
  }
}

.mainbox {
  width: 100%;
  height: 190px;
  background-image: linear-gradient(180deg, rgba(7, 124, 220, 0.00) 0%, rgba(7, 124, 220, 0.24) 100%);

  &_content {
    padding: 0 16px;
  }
}

.tmpbox {
  width: 434px;
  height: 55px;
  margin: -5px auto 0;
  background: url(../assets/img/tmp.png) no-repeat center;
}

.listbox {
  width: 50%;
  height: 90px;
  display: flex;
  flex-direction: column;
  justify-content: center;

  &.listbox0 {
    background: url("../assets/img/page/pdot1.svg") no-repeat left center;
  }

  &.listbox1 {
    background: url("../assets/img/page/pdot2.svg") no-repeat left center;
  }

  &.listbox2 {
    background: url("../assets/img/page/pdot3.svg") no-repeat left center;
  }

  &.listbox3 {
    background: url("../assets/img/page/pdot5.svg") no-repeat left center;
  }

  &.listbox20 {
    background: url("../assets/img/page/pdot1.svg") no-repeat left center;
  }

  &.listbox21 {
    background: url("../assets/img/page/pdot7.svg") no-repeat left center;
  }

  &.listbox22 {
    background: url("../assets/img/page/pdot5.svg") no-repeat left center;
  }

  &.listbox23 {
    background: url("../assets/img/page/pdot6.svg") no-repeat left center;
  }

  p {
    margin-left: 85px;

    &.listval {
      line-height: 42px;
      font-size: 24px;
      color: #53E2FF;
      letter-spacing: 1.44px;
      font-weight: bold;
    }

    &.listname {
      font-size: 14px;
      color: #FFFFFF;
      letter-spacing: 0.84px;
    }
  }

}

.pielegend {
  &.pielegend10 {
    p {
      &:nth-child(1) {
        &:before {
          content: '';
          width: 8px;
          height: 8px;
          background: #077CDC;
          display: inline-block;
          margin-right: 5px;
          vertical-align: middle;
        }
      }
    }
  }

  &.pielegend11 {
    p {
      &:nth-child(1) {
        &:before {
          content: '';
          width: 8px;
          height: 8px;
          background: #F78FFF;
          display: inline-block;
          margin-right: 5px;
        }
      }
    }
  }

  &.pielegend20 {
    p {
      &:nth-child(1) {
        &:before {
          content: '';
          width: 8px;
          height: 8px;
          background: #46C88C;
          display: inline-block;
          margin-right: 5px;
        }
      }
    }
  }

  &.pielegend21 {
    p {
      &:nth-child(1) {
        &:before {
          content: '';
          width: 8px;
          height: 8px;
          background: #FFB936;
          display: inline-block;
          margin-right: 5px;
        }
      }
    }
  }
}

.yzjzbox {
  width: 100%;
  margin: 0 auto;
  height: 190px;
  position: relative;

  p {
    text-align: center;
  }

  .yzjzcircle {
    width: 118px;
    height: 118px;
    background: url(../assets/img/page/piebg.svg) no-repeat center /118px 118px;
    position: absolute;
    left: 39px;
    top: 30px;
    animation: rotate1 3s linear infinite forwards;
  }

  .yzjzcircle1 {
    width: 80px;
    height: 80px;
    background: url(../assets/img/page/piebg.svg) no-repeat center /80px 80px;
    position: absolute;
    left: 27px;
    top: 25px;
    animation: rotate1 3s linear infinite forwards;
  }

  .yzjzcircle2 {
    width: 64px;
    height: 64px;
    background: url(../assets/img/page/piebg.svg) no-repeat center /64px 64px;
    position: absolute;
    left: 20px;
    top: 14px;
    animation: rotate1 3s linear infinite forwards;
  }
}

.flexlist {
  display: flex;
  flex-direction: column;
  justify-content: space-between
}

.normaltxt {
  font-size: 14px;
  color: #FFFFFF;
  letter-spacing: 0.84px;

  span {
    font-size: 16px;
    letter-spacing: 0.96px;
    font-weight: bold;
    padding: 0 10px;

    &.keyyellow {
      color: #FFB936;
    }

    &.keygreen {
      color: #46C88C;
      font-size: 24px;
    }

    &.keyyellow2 {
      color: #FFB936;
      font-size: 24px;
    }

    &.keyarrow {
      background: url("../assets/img/page/dotinfo.svg") no-repeat right center;
    }

    &.lightblue2 {
      color: #53E2FF;
      font-size: 24px;
    }

    &.up {
      background: url("../assets/img/page/dotup.svg") no-repeat left center;
      padding-left: 20px;
    }

    &.keyblue {
      color: #53E2FF;
    }
  }
}

.xuexiaolistbox {
  flex: 1;
  height: 32px;
  line-height: 32px;
  background: #0D2246;
  border: 1px solid rgba(1, 66, 120, 1);
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin: 0 5px;
  cursor: pointer;

  &.active {
    border: 1px solid rgba(83, 226, 255, 1);
  }

  p {
    font-size: 16px;
    color: #FFFFFF;
    letter-spacing: 0.96px;
  }
}

.sortbox {
  width: 80%;
  margin: 0 auto;
  height: 40px;
  line-height: 40px;
  font-size: 16px;
  color: #fff;

  p {
    cursor: pointer;

    &:before {
      content: '';
      width: 16px;
      height: 16px;
      background: #0D2246;
      border: 1px solid rgba(7, 124, 220, 0.56);
      border-radius: 2px;
      display: inline-block;
      vertical-align: middle;
      margin-right: 5px;
    }

    &.active:before {
      content: '✔';
      width: 16px;
      height: 16px;
      line-height: 16px;
      text-align: center;
      color: #53E2FF;
      background: #0D2246;
      border: 1px solid rgba(83, 226, 255, 1);
      border-radius: 2px;
      display: inline-block;
      vertical-align: middle;
      margin-right: 5px;
    }
  }
}

.flexbetween {
  display: flex;
  justify-content: space-between;
}

.flexbox {
  display: flex;
  align-items: center;
}

.flexwrap {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.wrap-table {
  width: 100%;
  border-spacing: 0
}

.wrap-table table {
  width: 100%;
  table-layout: fixed;
}

.wrap-table.head tr th {
  height: 40px;
  line-height: 40px;
  text-align: center;
  font-size: 14px;
  font-weight: 600;
  background: rgba(7, 124, 220, .24);
}

.wrap-table.body tr {
  td {
    font-size: 14px;
    padding: 8px 2px;
    text-align: center;
    letter-spacing: 0.84px;
    color: rgba(255, 255, 255, .72);
    background: rgba(7, 124, 220, .12);

    .progressbox1 {
      width: 180px;
      height: 12px;
      background: rgba(7, 124, 220, .12);
      position: relative;
      margin-right: 10px;
      margin-top: 5px;

      .progresscurbox {
        height: 4px;
        position: absolute;
        left: 4px;
        top: 4px;
        background: rgba(4, 193, 255, 1);

        &.progress0 {
          background: #FFB936;
        }
      }
    }

    p {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;

      &.sortN0 {
        color: #FFB936;
        display: flex;
        justify-content: center;
        align-items: center;

        &:before {
          content: 'NO.';
          display: inline-block;
          vertical-align: middle;
        }
      }

      &.yellowkey {
        color: #FFB936;
      }
    }
  }

  &:nth-child(odd) {
    td {
      background: rgba(7, 124, 220, .04);
    }
  }

}

.wrap-table.body tr td.keyblue {
  font-size: 14px;
  color: #05D7FF;
  font-weight: 600;
}

@keyframes rotate1 {
  0% {
    transform: rotate(0) scale(1);
  }
  100% {
    transform: rotate(-360deg) scale(1);
  }
}

/*下拉框*/
/deep/ .el-input {
  font-size: 16px;
  color: #FFFFFF;
}

/deep/ .el-input__inner {
  background: #0D2246;
  border: 1px solid rgba(7, 124, 220, 1);
  border-radius: 4px;
  color: #53E2FF;
  font-size: 16px;

  &::-webkit-input-placeholder {
    color: #53E2FF;
  }
}

/deep/ .el-select-dropdown__item {
  color: #fff;
}

/deep/ .el-select:hover .el-input__inner {
  border-color: #6ABEFF
}

/deep/ .el-select-dropdown {
  background: rgba(3, 32, 64, 0.80);
  border: 1px solid rgba(61, 82, 103, 1);
  border-radius: 8px;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
}

/deep/ .el-popper .popper__arrow::after {
  border-width: 0;
}

/deep/ .el-popper[x-placement^=bottom] .popper__arrow {
  border-bottom-color: transparent;
}

/deep/ .el-select-dropdown__item.selected {
  background: rgba(106, 190, 255, 0.16);
  color: #6ABEFF;
  font-weight: normal;
}

/deep/ .el-select-dropdown__item.hover, /deep/ .el-select-dropdown__item:hover {
  background: rgba(106, 190, 255, 0.16);
}

/deep/ .el-radio {
  font-size: 16px;
  color: #53E2FF;
  letter-spacing: 0.96px;
}
</style>
